<script lang="ts" setup></script>
<template>
  <div class="BgVue4">
    <div v-if="$slots.imgFixed" class="BgFixed">
      <slot name="imgFixed"></slot>
    </div>
    <div class="max-window">
      <slot></slot>
    </div>
    <!-- <img src="@/assets/imgV2/BlockchainGame-bg.png" /> -->
  </div>
</template>

<style lang="less" scoped>
.BgVue4 {
  background-image: linear-gradient(0deg, #177dcf 0%, #50abf6 100%);

  // padding-bottom: (267px/2);
  padding-bottom: (30px);
  min-height: calc(100vh - 62px);
  position: relative;

  // & > img {
  //   position: absolute;
  //   bottom: 0;
  //   width: 100%;
  //   // height: (267px/2);
  // }

  .max-window {
    position: relative;
  }

  .BgFixed {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    & > :deep(img) {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
